<template>
<rx-app>
    <!-- 头部 -->
    <rx-header :header="header"></rx-header>
    <!-- 侧栏 -->
    <rx-aside :slideBar="slideBar"></rx-aside>
    <!-- 主内容 -->
    <rx-main>
        <!-- 固定标题切换 -->
        <div id="components-title" class="components-title">
            <ul class="clearfix uiTab1 mb5">
                <router-link tag="li" class="col-md-4 fl" to="/ElementRx/Layout" active-class="uiTab1-active"><a href="javascript:">布 局</a></router-link>
                <router-link tag="li" class="col-md-4 fl" to="/ElementRx/Index" active-class="uiTab1-active"><a href="javascript:">功 能</a></router-link>
                <router-link tag="li" class="col-md-4 fl" to="/ElementRx/Iframe" active-class="uiTab1-active"><a href="javascript:">嵌 套</a></router-link>
            </ul>
        </div>
        <!-- 具体业务内容 -->
        <router-view></router-view>
        <!-- 消息弹出 -->
        <rx-tips></rx-tips>
    </rx-main>
</rx-app>
</template>
<script>
import rxTips from './Tips/Index.vue'
export default {
    metaInfo: {
        title: '瑞祥集团-布局模板',
        titleTemplate: '%s'
    },
    components: {
        rxTips
    },
    data () {
        return {
            // header 传值对象
            header: {
                title: '集团布局',
                list: [
                    {
                        name: '订单',
                        flag: 0,
                        count: 2,
                        icon: 'https://pa.rxjy.com/abc/images/header/order.png'
                    },
                    {
                        name: '消息',
                        flag: 1,
                        count: 0,
                        icon: 'https://pa.rxjy.com/abc/images/header/order.png'
                    }
                ]
            },
            // slideBar 传值对象
            slideBar: [
                { // 一级切换tab
                    name: '一栏',
                    list: [
                        {
                            name: '项目',
                            na: '项',
                            link: `/ElementRx/Index`,
                            menuFlag: 0,
                            count: 1
                        },
                        {
                            name: '嵌套',
                            na: '嵌',
                            link: `/ElementRx/Layout`,
                            menuFlag: 2,
                            iframe: true,
                            count: 18
                        },
                        {
                            name: '跳转百度',
                            na: '百',
                            link: `https://www.baidu.com/`,
                            menuFlag: 3
                        }
                    ]
                },
                {
                    name: '二栏',
                    list: [
                        {
                            name: '一级列表',
                            na: '一',
                            link: `/ElementRx/Index`,
                            menuFlag: 4
                        },
                        {
                            name: '多栏',
                            na: '多',
                            menuFlag: [5, 6],
                            children: [
                                {
                                    name: '第一项',
                                    link: `/ElementRx/Layout?index=1`,
                                    menuFlag: 5
                                },
                                {
                                    name: '嵌套',
                                    link: `/ElementRx/Layout?index=2`,
                                    menuFlag: 6,
                                    iframe: true
                                }
                            ]
                        }
                    ]
                }
            ],
            // slideBar 返回对象
            menuCall: {}
        }
    },
    created () {
        console.log(this, this.$utils)
    },
    methods: {

    }
}
</script>
